<template>
	<div class="es-home">
		<!-- 顶部菜单栏 -->
		<EsHeader />

		<div class="es-main">
			<!-- 左侧菜单栏 -->
			<Aside />

			<!-- 主体内容区域 -->
			<div class="es-content">
				<!-- 面包屑 -->
				<!-- 路由出口 -->
				<Breadcrumb />
				<router-view class="es-content-router-view" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import EsHeader from '../../components/Header/index.vue';
import Aside from '../../components/Aside.vue';
import Breadcrumb from '../../components/Breadcrumb.vue';
</script>

<style lang="less" scoped>
.es-home {
	width: 100%;
	height: 100%;
	overflow: hidden;
	.es-main {
		display: flex;
		height: calc(100% - 64px);
	}
}
.es-content {
	flex: 1;
	margin: 16px;
}
.es-content-router-view {
	padding: 16px;
	height: calc(100% - 22px - 16px);
	border-radius: 10px;
	overflow: hidden;
	overflow-y: auto;
	transition: all 0.3s;
	color: var(--colorText);
	background-color: var(--colorBgContainer);
}
</style>
